/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, BlobInputList, InputLine, Layer, LineColumn, Input, Button, useTheme,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, useItemInputControl, useRepSureButton,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";
import {DirectLink} from "../../../routing/Link";

interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
}
export const items元件=[ ['锅筒','锅筒',1],['省煤','省煤系统',1],['水冷','水冷系统',1],
             ['过热','过热系统',2],['再热','再热系统',2],['接管','连接管道及锅炉范围内管道',2], ];
export const config元件=[['部件名称','n',160, ],['规格','g',90],['最小需要壁厚','t',140],['材料','m',110], ] as Each_ZdSetting[];
export const itemA元件: string[]=[ ];
items元件.forEach(([name,_,_2], i:number)=>{
    itemA元件.push(name+'表');
});

export const PressureComponents=
    React.forwardRef(({ children, show ,alone=true,refWidth,verId,redId,nestMd,label,rep}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA元件, );
        const {inp, setInp} = useItemInputControl({ ref,redId,nestMd });
        const sureButton=useRepSureButton({inp, ref, nestMd, redId});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}  redId={redId} nestMd={nestMd}
                                 alone={alone}  label={label!}>
                <Text variant="h5">{label}:</Text>
                <hr/>
                {(new Array(3)).fill(null).map((_, w: number) => {
                    return <DynamicItems key={w} baseSeq={w+0} inp={inp} setInp={setInp} rep={rep} sureButton={sureButton}/>;
                })}
                { children }
            </InspectRecordLayout>
        );
    } );

//分离PressureComponents 下半部分的
export const OverheatingSys=
    React.forwardRef(({ children, show ,alone=true,refWidth,verId,redId,nestMd,label,rep}:Props,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null,itemA元件, );
        const {inp, setInp} = useItemInputControl({ ref,redId,nestMd });
        const sureButton=useRepSureButton({inp, ref, nestMd, redId});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}  redId={redId} nestMd={nestMd}
                                 alone={alone}  label={label!}>
                <Text variant="h5">{label}:</Text>
                <hr/>
                {(new Array(3)).fill(null).map((_, w: number) => {
                    return <DynamicItems key={w} baseSeq={w+3} inp={inp} setInp={setInp} rep={rep} sureButton={sureButton}/>;
                })}
                { children }
            </InspectRecordLayout>
        );
    } );

const DynamicItems= ( { inp,  setInp, baseSeq,rep, sureButton,} :
                          { inp: any,setInp: React.Dispatch<React.SetStateAction<any>>,baseSeq:number,rep:any,sureButton:React.ReactNode}
) => {
    const theme = useTheme();
    const setupEditor =React.useCallback((tseq:number,table: string) => {
        const editAs=(obj:any, setObj:React.Dispatch<React.SetStateAction<any>>, seq:number | null)=>{
            return <div css={{width: '100%'}}>
                    <div css={{display: 'flex'}}>
                        { items元件.map(([table, title, edtt], i: number) => {
                            if(i===baseSeq)  return null;
                            const pre= 0===i ? '' :
                                 (1===i && baseSeq==0) ? '' :  '|';
                            return <DirectLink key={i} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/${edtt===2? 'OverheatingSys':'PressureComponents'}?original=1#PressureComponents${i+1}`}>
                                <Text variant="h5">{pre}{title} &nbsp;</Text>
                            </DirectLink>;
                        })
                    }
                    </div>
                <Layer elevation={"sm"} css={{display: 'flex',justifyContent: 'center',flexDirection: 'column',width: '-webkit-fill-available',
                    [theme.mediaQueries.md]: {flexDirection: 'row',padding:'0.25rem'}
                }}>
                    {seq===null? '新' : seq!+1}
                    <div className="editLinc" css={{width: '-webkit-fill-available'}}>
                        <LineColumn className="editItems" column={3} >
                            {(config元件).map(([title,tag, _, callback]:any, i:number) => {
                                return (
                                    <InputLine key={i} label={title+'：'} css={{ "& .InputLine__Head": {alignItems: 'center'} }}>
                                        { 2===i?
                                            <BlobInputList  value={obj?.[tag] ||''} rows={2} onListChange={v => setObj({...obj,[tag]:v || undefined}) }/>
                                            :
                                            <Input value={obj?.[tag] ||''}
                                                   onChange={e => setObj({...obj, [tag]: (e.currentTarget.value||undefined)}) } />
                                        }
                                    </InputLine>
                                );
                            } )  }
                        </LineColumn>
                        <Button onPress={() => {
                            if(seq !== null) {
                                inp?.[table]?.splice(seq, 1, obj);    //替换掉的
                                setInp({ ...inp, [table]: [...inp?.[table]] });
                            }
                            else if(inp?.[table]?.length>0){
                                inp?.[table]?.splice(inp?.[table]?.length, 0, obj);
                                setInp({ ...inp, [table]: [...inp?.[table]] });
                            }
                            else  setInp({ ...inp, [table]: [obj] });
                        } }
                        >{(inp?.[table]?.length>0 && seq!==null)? `改一组就确认`: `新增一组`}</Button>
                    </div>
                </Layer>
            </div>;
        };
        return editAs;
    },[inp, setInp]);
    const table= items元件[baseSeq][0]+'表';
    //多出确认的按钮。
    const tailview=(baseSeq!==2 && baseSeq!==5) && sureButton;
    const [render锅筒]=useTableEditor({config: config元件, inp, setInp, maxRf:4,
             headview:<Text id={'PressureComponents'+(1+baseSeq)} variant="h5">{items元件[baseSeq][1]}。</Text>,table: table, editAs:setupEditor(baseSeq,table), tailview});
    return  render锅筒;
};

